<template>
  <div id="main">
    <el-form :inline="true" :model="queryData">
      <el-form-item label="日期">
        <el-date-picker v-model="queryData.date" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="巡检人">
      <el-input v-model="queryData.person" placeholder="请输入巡检人"></el-input>

        <!--<el-select v-model="queryData.status" placeholder="请选择状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>-->
      </el-form-item>
      <el-form-item>
        <el-button class="greenButton" type="primary" @click="onQuery">查询</el-button><el-button class="greenButton" type="primary" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right;">
          <el-button type="primary" class="greenButton" @click="dleMany()">批量删除</el-button>
      </el-form-item>
    </el-form>
      <el-table
        border
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        style="width: 100%;border:1px solid #00BDAC;"
        height="78%"
        :data="dailyPatrolList"
        :header-cell-style="{borderRight:'none',backgroundColor:'#00BDAC',color:'#FFFFFF',textAlign:'center'}"
      >
        <el-table-column
      type="selection"
      width="55">
      </el-table-column>
        <el-table-column align="center" width="50px" type="index" :index="table_index" label="序号"></el-table-column>
        <el-table-column align="center" prop="ta_time" label="日期" width="150px"></el-table-column>
        <el-table-column align="center" prop="route" label="巡检路线"></el-table-column>
        <el-table-column align="center" prop="person" label="巡检人"></el-table-column>
        <el-table-column align="center" prop="route_time" label="巡检时间段"></el-table-column>
        <!--<el-table-column align="center" prop="status" label="巡检状态">
           <template slot-scope="scope">
             <span :style="{color:scope.row.status === '异常'?'#FB1C89':'#606266'}">{{scope.row.status}}</span>
          </template>
        </el-table-column>-->
        <el-table-column align="center"  label="操作">
           <template slot-scope="scope">
             <el-button
              size="mini"
              class="pinkButton"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
        <!--<el-table-column align="center" prop="detail" label="详情">
          <template slot-scope="scope">
            <a href="javacript:void(0)" @click="onDetailclick(scope.row)">查看详情</a>
          </template>
        </el-table-column>-->
        <!-- <el-table-column align="center" prop="detail" label="管理" width="350">
          <template slot-scope="scope"> -->
            <!--<el-button
              class="yellowButton"
              size="mini"
              @click="handleRemind(scope.$index, scope.row)"
            >提醒</el-button>-->
            <!-- <el-button
              size="mini"
              class="greenButton"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              class="pinkButton"
              @click="handleCancel(scope.$index, scope.row)"
            >撤销</el-button>
          </template>
        </el-table-column> -->
      </el-table>

    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        layout="total,prev, pager, next, jumper"
        :total="totalNum"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>

      <!-- <el-button class="greenButton" type="primary">导出/下载</el-button> -->
    </div>

    <el-dialog
      :visible.sync="isShowDetail"
      :show-close="false"
      class="detail-dialog"
      width="1100px"
    >
      <el-table
        :data="detailTable"
        border
        style="width: 100%"
        :header-cell-style="{borderRight:'none',backgroundColor:'#00BDAC',color:'#FFFFFF'}"
      >
        <el-table-column align="center" prop="person" label="巡更人"></el-table-column>
        <el-table-column align="center" prop="route" label="巡更路线"></el-table-column>
        <el-table-column align="center" prop="pointOne" label="1号巡更点"></el-table-column>
        <el-table-column align="center" prop="pointTwo" label="2号巡更点"></el-table-column>
        <el-table-column align="center" prop="pointThree" label="3号巡更点"></el-table-column>
        <el-table-column align="center" prop="status" label="巡更情况"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      :visible.sync="isShowEdit"
      destroy-on-close
      :show-close="false"
      class="edit-dialog"
      width="1100px"
    >
      <div slot="title" class="edit-dialog-title">编辑巡查更任务</div>
      <el-form class="edit-form" label-width="100px" label-position="left">
        <el-form-item label="巡更时间：">
          <el-date-picker v-model="editFormData.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="巡更人：">
          <el-select v-model="editFormData.person" placeholder>
            <el-option
              v-for="item in personList"
              :key="item.value"
              :label="item.name"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-for="(route,index) in editFormData.routes" :key="index" label="巡更路线：">
          <el-select v-model="editFormData.routes[index].route" placeholder>
            <el-option
              v-for="item in routeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
          <!--<div v-if="index === 0" class="add-green-text">
            <img src="../../../../static/add.jpg" @click="addPatrolRoute" alt />
            <img src="../../../../static/cutdown.jpg" @click="reducePatrolRoute" alt />
            <span>添加寻更路线</span>
          </div>-->
        </el-form-item>
        <el-form-item label="备注要求：">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="editFormData.tips"></el-input>
        </el-form-item>
        <!--<el-form-item class="message-button">
          <el-button class="yellowButton">短信提醒</el-button>
        </el-form-item>-->
      </el-form>

      <div slot="footer">
        <el-button @click="cancel" class="pinkButton" type="primary">取消</el-button>
        <el-button @click="submit" class="greenButton" type="primary">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DayJs from 'dayjs'
let queryData = {
  date: "",
  status: ""
};
export default {
  data: function() {
    return {
      queryData: {
        date: "",
        status: "",
        person:""
      },

      statusOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "正常",
          label: "正常"
        },
        {
          value: "异常",
          label: "异常"
        }
      ],

      locationOptions: [
        {
          value: "1",
          label: "一号线"
        },
        {
          value: "2",
          label: "二号线"
        },
        {
          value: "3",
          label: "三号线"
        },
        {
          value: "4",
          label: "四号线"
        }
      ],

      dailyPatrolList: [
        /*{
          date: "12.8",
          route: "一号线",
          time: "8:00-10:00",
          person: "张三",
          status: "正常"
        },
        {
          date: "12.8",
          route: "一号线",
          time: "10:00-12:00",
          person: "张二",
          status: "正常"
        },
        {
          date: "12.8",
          route: "四号线",
          time: "8:00-10:00",
          person: "张一",
          status: "异常"
        },
        {
          date: "12.8",
          route: "二号线",
          time: "8:00-10:00",
          person: "李四",
          status: "正常"
        },
        {
          date: "12.8",
          route: "三号线",
          time: "8:00-10:00",
          person: "王五",
          status: "正常"
        },
        {
          date: "12.8",
          route: "三号线",
          time: "10:00-12:00",
          person: "王五",
          status: "正常"
        },*/
      ],

      currentPage: 1,
      pagesize:10,
      totalNum:100,
      isShowDetail: false,
       shicklist:[],
      detailTable: [
        {
          person: "张三",
          route: "1号线",
          pointOne: "1号楼 正常签到",
          pointTwo: "2号楼 正常签到",
          pointThree: "3号楼 正常签到",
          status: "正常"
        }
      ],

      isShowEdit: false,

      editFormData: {
        date: "",
        person: "",
        routes: [
          {
            route: ""
          }
        ],
        tips: ""
      },

      personList: [],
      routeList: [],
      multipleSelection:[]
    };
  },
  created(){
    this.initData();
    this.getList();


  },
  methods: {
    dleMany(){
      console.log(this.multipleSelection)
      if(this.multipleSelection.length==0){
        return this.$message.error('请选择您要删除的信息')
      }
      const arr = []
      this.multipleSelection.forEach((item)=>{
          arr.push(item.ta_id)
      })
      console.log(arr.join(','))
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let parme = {
                id:arr.join(',')
              }
              console.log(parme)
              this.ajaxCommon.ajax({
                    url: 'pilianggotaskdelete',
                    data:parme,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:'2000'
                          });
                          this.getList();
                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });

                      }
                     
                    }
                });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
    },
    handleSelectionChange(selection){
        console.log(selection)
        this.multipleSelection = selection
    },
    handleDelete(index,row){
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let info = row.ta_id
            console.log(row)
            this.ajaxCommon.ajax({
            url: 'tracedelTa',
            urlConcat:info,
            success: (res)=>{
              console.log(res);
              if(res.code==200){
                this.getList();
                // console.log(this.routeList)
                this.ajaxCommon.notice('删除成功');
              } else {
                this.ajaxCommon.notice(res.status,3);
              }
            }
          });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
    reset(){
      this.queryData.date = ''
      this.queryData.person = ''
      // this.onQuery()
      this.dailyPatrolList = this.shicklist
      
    },
    table_index(index){
        return (this.currentPage -1) * this.pagesize + index + 1
    },  
    getList(){ 
      var param = {
        page: this.currentPage,
        sort: 'DESC'
      };
      // if(queryData.date){
      //   param.date = queryData.date;
      // }
      console.log(JSON.stringify(param))
      this.ajaxCommon.ajax({
        url: 'taskList',
        data: param,
        success: (res) => {
          console.log(res);
          var list = [];
          res.data.forEach(item=>{
            list.push(Object.assign(item, {
              time: item.ta_time,
              route: item.route_name,
              person: item.user_nickname,
              status: item.task_status===1?'正常':'异常'
            }))
          });
          //console.log(list)
          this.dailyPatrolList = list;
          this.shicklist = list;
          this.totalNum = res.total;
          console.log(this.dailyPatrolList)
          /*
          ta_id: 7
          ta_time: "2018-02-20"
          ta_route_id: 17
          ta_u_id: 11
          ta_des: "测试"
          ta_status: "[[0,1,2],[0]]"
          ta_signed_time: ""

          dailyPatrolList: [
            {
              date: "12.8",
              route: "一号线",
              time: "8:00-10:00",
              person: "张三",
              status: "正常"
            },*/
          //this.dailyPatrolList = [];
        }
      });




    },

    
    initData(){
      this.ajaxCommon.ajax({
        url: 'numberList',
        success: (res) => {
          var list = [];
          console.log(res);
          Object.keys(res).forEach((index)=>{
            var item = res[index];
            list.push({
              name: item.u_name,
              value: item.u_id,
            })
          });
          this.personList = list;
        }
      });
      this.ajaxCommon.ajax({
        url: 'traceList',
        data: {
          sort: 'DESC'
        },
        success: (res) => {
          if (res.code == 200) {
            var list = [];
            res.data.forEach(item=>{
              list.push({
                value: item.route_id,
                name: item.route_name
              })
            });
            this.routeList = list;
          }
          console.log(res)
        }
      })
    },
    onQuery() {
      if(this.queryData.date){
        queryData.date = DayJs(this.queryData.date).format('YYYY-MM-DD');
      } 
      console.log(queryData.date,this.shicklist)
      let arr = [];
      if(this.queryData.date && !this.queryData.person){
        console.log('只有时间')
        this.shicklist.forEach(item => {
            if(queryData.date == item.time){
              arr.push(item)
            }
        })
        this.dailyPatrolList = arr;
        console.log(this.dailyPatrolList)
      }
      if(!this.queryData.date && this.queryData.person){
        this.shicklist.forEach(item => {
            if(this.queryData.person == item.person){
              arr.push(item)
            }
        })
        this.dailyPatrolList = arr;
      }
      if(this.queryData.date && this.queryData.person){
        this.shicklist.forEach(item => {
            if((queryData.date == item.time) && (this.queryData.person == item.person)){
              arr.push(item)
            }
        })
        this.dailyPatrolList = arr;
      }
     

      // if(this.queryData.person == ''&&this.queryData.person ==''){
      //       let arr = [];
      //       this.shicklist.forEach(item => {
              
      //           arr.push(item)
             
      //       })
      //       this.dailyPatrolList = arr;
      //       console.log('========')
      //     }
      
      
      
    },
    onDetailclick(index, row) {
      this.isShowDetail = true;
      console.log(row);
    },
    handleRemind(row) {
      console.log(row);
    },
    handleEdit(index, row) {
      var data = {
        date: DayJs(row.ta_time),
        person: row.ta_u_id,
        routes:[{
          route: parseInt(row.ta_route_id)
        }],
        tips: row.ta_des,
        id: row.ta_id
      };
      console.log(row,data);
      this.editFormData = data;
      this.isShowEdit = true;
      /*date: item.ta_time,
      time: item.ta_time,
      route: item.route_name,
      person: item.user_nickname*/
      /*editFormData: {
        date: "",
          person: "",
          routes: [
          {
            route: ""
          }
        ],
          tips: ""
      },*/

    },
    handleCancel(index, row) {
      var id = row.ta_id;
      this.$confirm('将删除此巡更任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.ajaxCommon.ajax({
          url: 'taskDel',
          urlConcat: id,
          success: (res)=>{
            console.log(res);
            if(res.code==200){
              this.getList();
              this.ajaxCommon.notice('删除成功');
            } else {
              this.ajaxCommon.notice('删除失败',3);
            }
          }
        });
      }).catch(() => {
        /*this.$message({
          type: 'info',
          message: '已取消删除'
        });*/
      });
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    addPatrolRoute() {
      this.editFormData.routes.push({
        route: ""
      });
    },
    reducePatrolRoute() {
      if (this.editFormData.routes.length > 1) this.editFormData.routes.pop();
    },
    submit(){
      var Notice = this.ajaxCommon.notice;
      var data = this.editFormData;
      var routs = [];
      data.routes.forEach(item=>{
        if(item.route){
          routs.push(item.route);
        }
      });
      if(!data.date){
        Notice('请选择巡更时间', 3);
        return
      }
      if(!data.person){
        Notice('请选择巡更人', 3);
        return
      }
      if(routs.length==0){
        Notice('请选择巡更路线', 3);
        return
      }
      var param = {
        ta_time: DayJs(data.date).format('YYYY-MM-DD'),
        ta_route_id: routs[0],
        ta_u_id: data.person,
        ta_des: data.tips,
        ta_id: data.id
      };

      this.ajaxCommon.ajax({
        url: 'taskEdit',
        data: param,
        method: 'post',
        success: res=>{
          if(res.code==200){
            this.isShowEdit = false;
            Notice('编辑成功');
            this.getList();
          } else {
            Notice(res.status, 2);
          }
        }
      })
    },
    cancel(){
      this.isShowEdit = false;
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
}

a {
  color: #00bdac;
  text-decoration: none;
}

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.edit-dialog-title {
  color: #ffffff;
  padding-left: 30px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  background: #00bdac;
}

.edit-form {
  width: 530px;
}

.message-button {
  text-align: right;
}

.add-green-text {
  display: inline-flex;
  color: #00bdac;
  width: 140px;
  justify-content: space-between;
  align-items: center;
  vertical-align: bottom;
  margin-left: 14px;

  img {
    cursor: pointer;
    width: 22px;
    height: 22px;
  }
}

.table-container{
  height: 420px;
  border:1px solid #00BDAC;
}
</style>

<style lang="less">
.detail-dialog {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 0;
    height: 450px;
  }
}

.edit-dialog {
  .el-dialog__header {
    padding: 0;
  }
}
</style>
